<script setup>
  import { initEChart,option,lineOptions } from '../../echjs/optist.js'
    import {  onMounted,getCurrentInstance,ref} from 'vue'
      // 这里是挂载到proxy实例的上边，可以实现全局调用
    const { proxy } =  getCurrentInstance()
    const getlineOptions = () => {
            const options = lineOptions();  // 获取默认配置  
            console.log('options',options);
            
            options.xAxis.data = []
            options.series[0].markArea.data = []
            options.series[0].name = []  
            options.series[0].data = []  
            options.series[1].name = []  
            options.series[1].data = []  
            options.series[2].data = []
            let color = [
                '#fe320059',
                '#fc983559',
                '#feca0659',
                '#feff6559',
                '#cdf7f959',
                '#9fe6fe59',
                '#00ccfe59',
                '#029aff59',
                '#0165fc59',
            ] 
            let color1 = [
                '#FE3200',
                '#FC9835',
                '#FECA06',
                '#FEFF65',
                '#CDF7F9',
                '#9FE6FE',
                '#00CCFE',
                '#029Aff',
                '#0165fc'
            ]
            let result = [
                {name:'2023/01',value:'10',value2:'37',value1:'14'},
                {name:'2023/02',value:'11',value2:'38',value1:'12'},
                {name:'2023/03',value:'15',value2:'35',value1:'12'},
                {name:'2023/04',value:'14',value2:'36',value1:'11'},
                {name:'2023/05',value:'17',value2:'67',value1:'16'},
                {name:'2023/06',value:'18',value2:'23',value1:'19'},
                {name:'2023/07',value:'10',value2:'63',value1:'3'},
                {name:'2023/08',value:'4',value2:'27',value1:'44'},
                {name:'2023/09',value:'5',value2:'36',value1:'2'},
                {name:'2023/10',value:'6',value2:'6',value1:'45'},
                {name:'2023/11',value:'31',value2:'1',value1:'6'},
                {name:'2023/12',value:'1',value2:'9',value1:'4'},
                {name:'2023/13',value:'9',value2:'34',value1:'6'},
                {name:'2023/14',value:'70',value2:'34',value1:'3'},
            ] //假设接口数据
            let event = [
                {
                    time:'2023/06',
                    startTime:'2023/06',
                    endTime:'2023/07',
                    ydzb:'日电量同比',
                    sdyz:"-15% ~ +10%",
                    ydz:'+30%',
                    sjlx:'xxxxxxxx',
                    kztmc:'高温',
                    keyVlaue:'01', // 
                    yxdwfw:'重庆',
                    yxsjfw:'2024年06月15日09:00 -2024年06月6日09:00 ',
                    yxhyfw:'部分大工业',
                    yxjg:'高温导致限电，停产'
                },
                {
                    time:'2023/05',
                    startTime:'2023/05',
                    endTime:'2023/06',
                    ydzb:'日电量同比',
                    sdyz:"-15% ~ +10%",
                    ydz:'+30%',
                    sjlx:'xxxxxxxx',
                    kztmc:'高温',
                    keyVlaue:'02', // 
                    yxdwfw:'重庆',
                    yxsjfw:'2024年06月15日09:00 -2024年06月6日09:00 ',
                    yxhyfw:'部分大工业',
                    yxjg:'高温导致限电，停产'
                },
                {
                    time:'2023/03',
                    startTime:'2023/11',
                    endTime:'2023/12',
                    ydzb:'日电量同比',
                    sdyz:"-15% ~ +10%",
                    ydz:'+30%',
                    sjlx:'xxxxxxxx',
                    kztmc:'高温',
                    keyVlaue:'03', // 
                    yxdwfw:'重庆',
                    yxsjfw:'2024年06月15日09:00 -2024年06月6日09:00 ',
                    yxhyfw:'部分大工业',
                    yxjg:'高温导致限电，停产'
                },
                // {
                //     time:'2023/01',
                //     startTime:'2023/06',
                //     endTime:'2023/08',
                //     ydzb:'日电量同比',
                //     sdyz:"-15% ~ +10%",
                //     ydz:'+30%',
                //     sjlx:'xxxxxxxx',
                //     kztmc:'高温',
                //     keyVlaue:'01', // 
                //     yxdwfw:'重庆',
                //     yxsjfw:'2024年06月15日09:00 -2024年06月6日09:00 ',
                //     yxhyfw:'部分大工业',
                //     yxjg:'高温导致限电，停产'
                // },
                // {
                //     time:'2023/11',
                //     startTime:'2023/1',
                //     endTime:'2023/13',
                //     ydzb:'日电量同比',
                //     sdyz:"-15% ~ +10%",
                //     ydz:'+30%',
                //     sjlx:'xxxxxxxx',
                //     kztmc:'高温',
                //     keyVlaue:'01', // 
                //     yxdwfw:'重庆',
                //     yxsjfw:'2024年06月15日09:00 -2024年06月6日09:00 ',
                //     yxhyfw:'部分大工业',
                //     yxjg:'高温导致限电，停产'
                // },
                // {
                //     time:'2023/13',
                //     startTime:'2023/12',
                //     endTime:'2023/13',
                //     ydzb:'日电量同比',
                //     sdyz:"-15% ~ +10%",
                //     ydz:'+30%',
                //     sjlx:'xxxxxxxx',
                //     kztmc:'高温',
                //     keyVlaue:'01', // 
                //     yxdwfw:'重庆',
                //     yxsjfw:'2024年06月15日09:00 -2024年06月6日09:00 ',
                //     yxhyfw:'部分大工业',
                //     yxjg:'高温导致限电，停产'
                // },
            ] // 这个是异动数据
            options.xAxis.data = result.map((itme)=>{
                return itme.name
            })
            options.series[0].name = '电量' // 根据表单中的选择日期组装
            options.series[1].name = '同比' // 根据表单中的选择日期组装
            options.series[3].name = '地毯' // 根据表单中的选择日期组装
            options.series[0].data = result.map((item)=>{
                return item.value
            })
            options.series[1].data = result.map((item)=>{
                return item.value1
            })
            options.series[3].data = result.map((item)=>{
                return item.value2
            })
            options.series[0].markArea.data = event.map((item)=>{
                return [
                    {
                        itemStyle: {
                            color:item.keyVlaue === "01" ? color[0] : item.keyVlaue === '02' ? color[1] : item.keyVlaue === '02' ? color[2] : color[3] // 标志颜色根据事件类型判断
                        },
                        xAxis: item.startTime
                    },
                    {
                        xAxis:item.endTime
                    }
                ]
            })
            // 解决散点图遮挡问题
            let valueArray = result.map((item)=>{
                return Number(item.value)
            })
            let min = Math.min(...valueArray)
            options.series[2].data = event.map((item,index)=>{
                return {
                    value:[item.time,min + index * 10],
                    ...item,
                    itemStyle: {
                        normal:{
                            color:item.keyVlaue === "01" ? color1[0] : item.keyVlaue === '02' ? color1[1] : item.keyVlaue === '02' ? color1[2] : color1[3]
                        }
                    }
                }
            })
            setTimeout(()=>{
            this.myChart = initEChart(proxy.$refs['lineOptionss'], options);  // 初始化 ECharts 实例    

            this.myChart.on('showTip',()=>{
                const tooltipContent = document.querySelector('.clTic')
                if(tooltipContent){
                    tooltipContent.addEventListener('click',(e) =>{
                        let res = target.getAttribute('data-param'); // key 值与后端确认
                        console.log(res,'点击事件');
                        //路由跳转
                        
                    })
                }
            })
            })

             // 监听窗口resize事件以自适应图表  
            //  window.addEventListener('resize', myChart.resize);  
        }
    onMounted(()=>{
       getlineOptions()
    })
</script>

<template>
      <div style="width:100%;height: 400px;" ref="lineOptionss"></div>
      <div>111111111</div>
</template>

<style scoped>

</style>
